<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
		
		<view class="flex align-center justify-between p-3 bg-white">
			<view class="flex align-center flex-column justify-center" @tap="jump(item.url, { type: item.type })" v-for="(item,index) in orderCategory" :key="index">
				<view class="order-img">
					<image :src="item.img" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="order-title">{{item.title}}</view>
			</view>
		</view>
		
		<view class="flex align-center p-3 bg-white mt-2">
			<view class="flex align-center flex-column justify-center" style="margin-right: 58rpx;" @tap="jump('/pages/user/hospital')">
				<view class="order-img">
					<image src="/static/images/hospital.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="order-title">医院信息</view>
			</view>
			<!-- <view class="ser-son" style="margin-right: 58rpx;">
				<button open-type="contact">
					<view class="order-img" style="margin: 0 auto;">
						<image src="/static/images/yue.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="order-title">在线预约</view>
				</button>
			</view> -->
			<view class="flex align-center flex-column justify-center" @tap="jump('/pages/user/yue-list')" style="margin-right: 58rpx;">
				<view class="order-img">
					<image src="/static/images/yue.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="order-title">我的预约</view>
			</view>
			<view class="flex align-center flex-column justify-center" @tap="jump('/pages/user/complaints')" style="margin-right: 58rpx;">
				<view class="order-img">
					<image src="/static/images/medical.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="order-title">在线投诉</view>
			</view>
		</view>
		<!-- 自定义模块 -->
		<!-- <view v-for="(item, index) in userTemplate" :key="item.id"> -->
			<!-- 轮播 -->
			<!-- <sh-banner
				v-if="item.type === 'banner' && index !== 0"
				:Px="item.content.x"
				:Py="item.content.y"
				:borderRadius="item.content.radius"
				:height="item.content.height"
				:list="item.content.list"
			></sh-banner> -->
			<!-- 滑动宫格 -->
			<!-- <sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper> -->
			<!-- 广告魔方 -->
			<!-- <sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv> -->
			<!-- 推荐商品 -->
			<!-- <sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods> -->
			<!-- 富文本 -->
			<!-- <sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext> -->
			<!-- 功能列表 -->
			<!-- <sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell> -->
			<!-- 九宫格列表 -->
			<!-- <sh-grid v-if="item.type === 'grid-list'" :list="item.content.list"></sh-grid> -->
			<!-- 钱包 -->
			<!-- <sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet> -->
			<!-- 订单卡片 -->
			<!-- <sh-order-card v-if="item.type === 'order-card'"></sh-order-card> -->
		<!-- </view> -->
		<!-- copyright -->
		<!-- <view class="copyright-box u-flex-col u-row-center u-col-center u-p-t-80 u-p-b-50" v-if="initShop.copyright">
			<view class="copyright-text">{{ initShop.copyright[0] }}</view>
			<view class="copyright-text">{{ initShop.copyright[1] }}</view>
		</view> -->

		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
		<!-- <shopro-float-btn></shopro-float-btn> -->
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shAdv from './components/sh-adv.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shHotGoods from './components/sh-hot-goods.vue';

import userinfoCard from './user/userinfo-card.vue';

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

import share from '@/shopro/share';

export default {
	components: {
		shBanner,
		shGridSwiper,
		shAdv,
		shRichtext,
		shCell,
		shGrid,
		shWallet,
		shOrderCard,
		shHotGoods,

		userinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false ,//是否开启吸顶。
			orderCategory:[
				{
					img:'/static/images/all.png',
					url:'/pages/order/list',
					title:'全部订单',
					type:'all'
				},
				{
					img:'/static/images/dai.png',
					url:'/pages/order/list',
					title:'待支付',
					type:'nopay'
				},
				{
					img:'/static/images/wei.png',
					url:'/pages/order/list',
					title:'未使用',
					type:'noget'
				},
				{
					img:'/static/images/used.png',
					url:'/pages/order/list',
					title:'已使用',
					type:'nocomment'
				},
				{
					img:'/static/images/juan.png',
					url:'/pages/user/coupon',
					title:'卡卷中心',
					type:''
				}
			]
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}
		this.enable = true;
	},

	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.showShare = true;
			uni.hideTabBar();
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		}
	}
};
</script>

<style lang="scss">
.copyright-box {
	.copyright-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
}
	.order-img{
		width: 60rpx;
		height: 60rpx;
	}
	.order-title{
		color: #656565;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}
	.ser-son button::after {
		border: none;
	}
	
	.ser-son button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.4;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		width: 100%;
		height: 100%;
	}
</style>
